<template>
	<div class="dashboard-container">
		<el-card class="box-card">
			<!-- <el-button style="margin-bottom: 15px" type="primary">添加</el-button> -->
			<el-button type="primary" style="margin-left: 10px" @click="$router.push('/article/add-article')">添加发布文章</el-button>

			<div class="article-box">
				<div class="search">
					<el-input v-model="state.search" placeholder="请输入查询的文章" style="width: 240px; margin-bottom: 20px">
						<template #prefix>
							<el-icon class="el-input__icon"><search /></el-icon>
						</template>
					</el-input>
					<el-button @click="getSearch" type="primary" style="margin-left: 10px">查询</el-button>
				</div>

				<el-form :model="state.formInline" inline>
					<el-form-item label="分类查询">
						<el-select v-model="state.formInline.category" placeholder="请选择分类">
							<el-option v-for="(item, i) in state.formInline.options" :key="i" :label="item" :value="item" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getSearch">查询</el-button>
					</el-form-item>
				</el-form>
			</div>

			<div class="table-view mb20">
				<el-table v-if="state.articleList.length" :data="state.articleList" border>
					<el-table-column label="#" prop="lid" width="50" type="index" />
					<el-table-column label="文章标题" prop="tatle" />
					<el-table-column label="分类名" prop="className" />
					<el-table-column label="文章图片" prop="sex">
						<template v-slot="{ row }">
							<el-image :src="row.wztp" style="width: 100px" />
						</template>
					</el-table-column>
					<!-- <el-table-column label="评论数量" prop="pl" /> -->
					<el-table-column label="发布时间" prop="time" />
					<el-table-column label="状态">
						<template v-slot="{ row }">
							<el-tag v-if="row.sh === '1'" type="success">正常</el-tag>
							<el-tag v-else type="info">审核中</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default>
							<el-button type="primary" link>审核</el-button>
							<el-button type="danger" link>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="is-has">暂无数据</div>
			</div>
			<!-- 分页区域 -->
			<Pagination
				v-if="state.articleList.length"
				:pageable="state.pageable"
				@page-change="pageChange"
				@size-change="sizeChange"
			/>
		</el-card>
	</div>
</template>

<script setup lang="ts">
	import { articleList } from '@/api/modules/article'
	import Pagination from '@/components/Pagination/index.vue'
	import { onMounted, reactive } from 'vue'
	const state = reactive({
		articleList: [],
		search: '',
		formInline: {
			category: '',
			options: [
				'开发者',
				'设计',
				'iOS',
				'android',
				'后端',
				'php',
				'面试',
				'c+ +',
				'测试开发',
				'css',
				'区块链',
				'数据库',
				'go',
				'产品',
				'linux',
				'人工智能',
				'JavaScript',
				'框架',
				'前端',
				'python',
				'Java',
				'算法',
				'科技动态',
				'js',
				'数码产品',
				'html',
				'软件测试',
			],
		},
		pageable: {
			pageNumber: 1,
			pageSize: 5,
			total: 100,
		},
	})
	onMounted(() => {
		getarticleList()
	})
	const getSearch = () => {
		console.log(1)

		getarticleList()
	}
	const getarticleList = async () => {
		const { data } = await articleList({
			page: state.pageable.pageNumber,
			size: state.pageable.pageSize,
			tatle: state.search,
			className: state.formInline.category,
		})
		state.articleList = data.data
		state.pageable.total = data.pageable.total
	}
	// * 页码改变
	const pageChange = (page: number) => {
		state.pageable.pageNumber = page
		getarticleList()
	}

	// * 每页条数改变
	const sizeChange = (size: number) => {
		state.pageable.pageNumber = 1
		state.pageable.pageSize = size
		getarticleList()
	}
</script>

<style scoped lang="scss">
	.is-has {
		text-align: center;
		color: #ccc;
	}
	.article-box {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}
	.page-view {
		margin-bottom: 10px;
	}
</style>
